﻿@using KMF.WebUI.Areas.KMFadmin.Models
@using KMF.WebUI.Areas.KMFadmin.CustomHelpers
@model KMF.Common.ColorDto
@{
    ViewBag.Title = "Edit";
    Layout = "~/Areas/KMFadmin/Views/Shared/_layout.cshtml";
}
@section LeftMenu
{
    <ul id="p-quick-menu" class="quick-menu">
        <li class="qmn-info-pro">Thông tin màu sắc</li>
    </ul>
}
<link href="@Url.Content("~/Areas/KMFadmin/Scripts/colorPicker/css/colorpicker.css")" rel="stylesheet" />
<nav>
    <div id="jCrumbs" class="breadCrumb module">
        <ul>
            <li><a href="@Url.Action("Index", "AdminHome")"><i class="bootstrap icon-home"></i></a></li>
            <li><a href="javascript:void(0)">Sản phẩm</a> </li>
            <li><a href="@Url.Action("Add", "AdminColor")">Thêm màu sắc</a> </li>
        </ul>
    </div>
</nav>
<div class="toolBox">
    @Html.ToolBox(new List<object> { new Edit { ClassCss = "Edit", ActionName = "Javascript:void(0)" }, new Back { ClassCss = "Back", ActionName = @Url.Action("Index", "AdminColor") } })
</div>
@using (Html.BeginForm("Edit", "AdminColor", FormMethod.Post ))
{
    <div class="box-Info">
        <div class="Info-header">
            <span>Thêm mới màu sắc </span>
        </div>
    
        <div class="Info-body ib-infopro">
        
            <table cellpadding="0" cellspacing="0" width="100%" border="0" class="table-info">
                @Html.HiddenFor(m => m.Id)
                @Html.HiddenFor(m => m.CreateDate)
                <tr>
                    <td class="tInfoLeft">
                        Tên màu
                    </td>
                    <td class="tInfoRight">
                        @Html.TextBoxFor(m => m.Name)
                        @Html.ValidationMessageFor(m => m.Name)
                    </td>
                </tr>
                <tr>
                    <td class="tInfoLeft">
                        Mã màu
                    </td>
                    <td class="tInfoRight">
                        @Html.TextBoxFor(m => m.Code, new { id = "colorSelector" })
                        @Html.ValidationMessageFor(m => m.Code)
                    </td>
                </tr>
                <tr>
                    <td class="tInfoLeft">Màu hiển thị</td>
                    <td class="tInfoRight">
                        <span class="realColor" style="padding: 5px 12px; background-color: @Model.Code"></span>
                    </td>
                </tr>
                <tr>
                    <td class="tInfoLeft">
                        Hiển thị
                    </td>
                    <td class="tInfoRight">
                        @Html.CheckBoxFor(m => m.Active, new { @checked = "checked"})
                    </td>
                </tr>
            </table>
        
        </div>
    </div>

}
@section scripts
{
    
    <script src="~/Areas/KMFadmin/Scripts/colorPicker/js/colorpicker.js"></script>
    <script src="~/Areas/KMFadmin/Scripts/colorPicker/js/eye.js"></script>
    <script src="~/Areas/KMFadmin/Scripts/colorPicker/js/utils.js"></script>
    <script src="~/Areas/KMFadmin/Scripts/colorPicker/js/layout.js"></script>
    <script type="text/javascript">
        $('#colorSelector').ColorPicker({
            color: '#0000ff',
            onShow: function (colpkr) {
                $(colpkr).fadeIn(500);
                return false;
            },
            onHide: function (colpkr) {
                $(colpkr).fadeOut(500);
                return false;
            },
            onChange: function (hsb, hex, rgb) {
                $(this).val('#' + hex);
            },
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val('#'+hex);
                $(el).ColorPickerHide();
                $('.realColor').css('background-color', '#' + hex);
            },
        });

        SubmitFormUseToolBox($('#Toolbox li.Edit a'), $('form'));
    </script>
    
}

